import {React, useState, useEffect } from 'react'
import { Button, Layout, Modal, Input, Switch, Flex } from 'antd'
import './Setting.css'
import {DollarTwoTone} from '@ant-design/icons'
import {ApiService } from '../common/ApiService'
import {
    EyeInvisibleOutlined, EyeTwoTone 
  } from '@ant-design/icons';

const { Header, Footer, Sider, Content } = Layout;
const headerStyle = {
    color: '#fff',
    height: 114,
    paddingInline: 61,
    lineHeight: '114px',
    backgroundColor: '#141E20',
  };
  const contentStyle = {
    textAlign: 'center',
    color: '#fff',
    backgroundColor: '#141E20',
  };
  const siderStyle = {
    color: '#fff',
    backgroundColor: '#23363A',
  };
  const layoutStyle = {
    width: '100%',
    maxWidth: '100%',
    minHeight: '100vh'
  };
  const handlChangeSwitch = async (switchImg) => {
    if (switchImg) {
        document.getElementById('whitchImg').src = '../public/images/memberSwitch1.svg'
    } else {
        document.getElementById('whitchImg').src = '../public/images/memberSwitch.svg'
    }
};
const Setting = () =>{
    const [visible, setVisible] = useState(false);
    const [visiblePwd, setVisiblePwd] = useState(false);
    const [userData, setUserData] = useState({email: '', ref_code: '', username: ''});
    const [pwd, setPwd] = useState({ password: '' });
    const [switchImg, setSwitchImg] = useState(true);
        useEffect(() => {
            const fetchData = async () => {
                try {
                    var response = await ApiService.getUser();
                    if (response.code === 0) {
                        setUserData(response.data);
                        userData.email = response.data.email;
                        userData.username = response.data.username;
                        userData.ref_code = response.data.ref_code;
                        console.log(userData);
                    }    
                } catch (err) {
                    //setError(err.message);
                }
            }
            fetchData();
          }, []); 
    const handlUpdatePassword = async (e) => {
            e.preventDefault();
            try {
                
                var response = await ApiService.changePwd(pwd);
                if (response.code === 0) {
                    setPwd({ password: '' });
                    localStorage.removeItem('token');
                    // location.href = '/Login';
                    alert('Success,Please go to login!');
                    setVisiblePwd(false)
                    location.href = '/Login'
                } else {
                    alert(response.message)
                }
            } catch (err) {
                setError(err.message);
            }
        };
    
    return (
        <>
        <Layout style={layoutStyle}>
                <Sider width="403px" style={siderStyle}>
                    <div className='menuList'>
                        <img src='../public/images/LOGO1.svg' width='238px' height='32px' onClick={() => {location.href= '/'}} />
                        <div className='checkMenu' onClick={() => {location.href= '/MemberInfo'}}>
                            <img src='../../public/images/arrowhead3.svg' />
                            Dashboard
                        </div>
                        <div className='checkMenu' onClick={() => {location.href= '/ApiKey'}}>
                            <img src='../../public/images/API_N3.svg' />
                            Endpoint & API Key
                        </div>
                        <div className='checkMenu active'>
                            <img src='../../public/images/setting.svg' />
                            Setting
                        </div>
                    </div>
                </Sider>
                <Layout>
                    <Header style={headerStyle}>
                        <div className='memberHeader'>
                            <div className='name'>Setting</div>
                            <div className='info'>
                                Balance: <span>$0.00</span> USDC
                                <img src='../../public/images/memberRobot.svg' />
                                <div className='robotName'>U</div>
                            </div>
                        </div>
                    </Header>
                    <Content style={contentStyle}>
                        <div className='SettingMain'>
                            <div className='setting'>
                                <div className='Account'>
                                    <div className='title'>Account Settings</div>
                                    <div className='desc'>Manage your profile and account settings</div>
                                    <div className='content'>
                                        <div className='header'>
                                            <img src='../../public/images/header.png' />
                                        </div>
                                        <div className='list'>
                                            <div className='item'>
                                                <div className='lab'>Full Name</div>
                                                <div className='val'>{userData.username}</div>
                                            </div>
                                            <div className='item'>
                                                <div className='lab'>Emall Address</div>
                                                <div className='val'>{userData.email}</div>
                                            </div>
                                            <div className='item'>
                                                <div className='lab'>Organization</div>
                                                <div className='val'>N/A</div>
                                            </div>
                                            <div className='item'>
                                                <div className='lab'>Country</div>
                                                <div className='val'>USA</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div className='Security'>
                                    <div className='title'>Security Settings</div>
                                    <div className='subTitle'>UpdatePassword</div>
                                    <div className='desc'>Change your old password to a new one</div>
                                    <div className='iconImg'>
                                        <img src='../../public/images/3331.svg' />
                                    </div>
                                    <Button onClick={() => setVisiblePwd(true)} style={{
                                        marginTop: 13,
                                        backgroundColor: '#31F045',
                                        height: 41,
                                        width: 190,
                                        borderRadius: 20,
                                        border: 'none',
                                        fontSize: 16,
                                        fontFamily: 'Inter'
                                    }}>
                                    Change Password
                                    </Button>
                                    <Button onClick={() => setVisible(true)} style={{
                                            backgroundColor : '#23363A  ',
                                            width: 190,
                                            height: 41,
                                            border: '#31F045 solid 1px',
                                            borderRadius: 20,
                                            color: '#ffffff',
                                            fontSize: 16,
                                            marginLeft: 20,
                                            fontFamily: 'Inter'
                                        }}>
                                        Logout Account
                                        </Button>
                                </div>
                            </div>
                            <div className='Tip'>
                                <div className='title'>Tip Rebate Program</div>
                                <div className='subContent'>
                                    <div className='sub'>
                                        <div className='subTitle'>Enable Tip RebateProgram</div>
                                        <div className='desc'>By enabling FlashBlock Exclusivity, you can receive a rebate of 50% of all the revenue we generate from your tips on MEV- protected transactions. Thls requires all transactlons to come to FlashBlock exclusively, meaning you should not send to Jito or other providers.</div>
                                    </div>
                                    <div className='switch'>
                                        <img id='whitchImg'  onClick={() => {setSwitchImg(!switchImg)}} src={switchImg ? '../../public/images/memberSwitch.svg' : '../../public/images/memberSwitch1.svg'} />
                                    </div>
                                </div>
                                <div>
                                    <Button style={{
                                        backgroundColor : '#23363A  ',
                                        width: 190,
                                        height: 41,
                                        border: '#31F045 solid 1px',
                                        borderRadius: 20,
                                        color:'#ffffff',
                                        marginTop: 30,
                                        float: 'left',
                                        fontSize: 16,
                                        fontFamily: 'Inter'
                                    }}>
                                    Learn More
                                    </Button>
                                </div>
                            </div>
                            {/* <div className='Action'>
                                <div className='title'>Account Actions</div>
                                    <div className='subContent'>
                                        <div className='sub'>
                                            <div className='subTitle'>Logout Account</div>
                                            <div className='desc'>Logout your account and all assoclated data</div>
                                        </div>
                                        <Button onClick={() => setVisible(true)} style={{
                                            backgroundColor: '#31F045',
                                            width: 156,
                                            height: 41,
                                            borderRadius: 20,
                                            border: 'none',
                                            fontSize: 16
                                        }}>
                                        Logout Account
                                        </Button>
                                    </div>
                                    <div>
                                </div>
                            </div> */}
                        </div>
                        <Modal
                            title="Are you sure you want to Logout your Account?"
                            open={visible}
                            onOk={() => setVisible(false)}
                            onCancel={() => setVisible(false)}
                            width={520}
                            className='deleteAccount'
                            footer={null}
                        >
                            <p style={{fontSize:14, fontWeight: 'normal'}}>All your data including usage history, PI keys, and personal information, will be permanently erased and cannot be recovered.</p>
                            <div style={{display: 'flex', justifyContent:'space-between'}}>
                            <Button key="back" onClick={() => setVisible(false)} style={{
                                width: 200,
                                height: 45,
                                backgroundColor: '#23363A',
                                border: '#31F045 solid 1px',
                                borderRadius: 30,
                                fontSize: 16,
                                color: '#ffffff',
                                fontWeight: 500,
                                marginTop: 70
                            }}>
                                Cancel
                            </Button>
                            <Button key="submit" type="primary" onClick={() => {setVisible(false); localStorage.removeItem('token'); location.href='Login'}} style={{
                                width: 200,
                                height: 45,
                                backgroundColor: '#31F045',
                                borderRadius: 430,
                                fontSize: 16,
                                color: '#000000',
                                fontWeight: 500,
                                marginTop: 70
                            }}>
                                Generate
                            </Button>
                            </div>
                            {/* 可以在这里放置复杂内容或组件 */}
                        </Modal>

                        <Modal
                            title="Change Password"
                            open={visiblePwd}
                            onOk={() => setVisiblePwd(false)}
                            onCancel={() => setVisiblePwd(false)}
                            width={520}
                            className='deleteAccount'
                            footer={null}>
                                <div style={{marginTop: 94, fontSize: 14}}>Old Password</div>
                                <Input.Password style={{height: '50px', borderRadius: 30, marginTop: 14}} 
                                iconRender={visible1 => (visible1 ? <EyeTwoTone twoToneColor='#31F045' /> : <EyeInvisibleOutlined style={{color:'#31F045'}} />)}></Input.Password>
                                <div style={{marginTop: 14, fontSize: 14}}>New Password</div>
                                <Input.Password style={{height: '50px', borderRadius: 30, marginTop: 14}} 
                                iconRender={visible2 => (visible2 ? <EyeTwoTone twoToneColor='#31F045' /> : <EyeInvisibleOutlined style={{color:'#31F045'}} />)}
                                value={pwd.password} onChange={(e) => setPwd({...pwd, password: e.target.value})}></Input.Password>
                                <div style={{display: 'flex', marginTop: 25}}>
                                    <div>Password</div>
                                    <img src='../public/images/regist/exclamation 1.svg' />
                                    <div style={{lineHeight: '15px'}}>At least eight characters, one uppercase, one lowercase,a number and a special character.</div>
                                </div>
                                <div style={{display: 'flex', justifyContent:'space-between'}}>
                                    <Button key="back" onClick={() => setVisiblePwd(false)} style={{
                                        width: 200,
                                        height: 45,
                                        backgroundColor: '#23363A',
                                        border: '#31F045 solid 1px',
                                        borderRadius: 30,
                                        fontSize: 16,
                                        color: '#ffffff',
                                        fontWeight: 500,
                                        marginTop: 50
                                    }}>
                                        Cancel
                                    </Button>
                                    <Button key="submit" type="primary" onClick={handlUpdatePassword} style={{
                                        width: 200,
                                        height: 45,
                                        backgroundColor: '#31F045',
                                        borderRadius: 430,
                                        fontSize: 16,
                                        color: '#000000',
                                        fontWeight: 500,
                                        marginTop: 50
                                    }}>
                                        Generate
                                    </Button>
                                </div>
                            {/* 可以在这里放置复杂内容或组件 */}
                        </Modal>
                    </Content>
                </Layout>
                </Layout>
        </>
    )
}
export default Setting